// 配置类型定义
type BottomPanelConfig = {
	overlay: string;
	container: string;
	header: string;
	title: string;
	close: string;
	footer: string;
	content: string;
};

type PanelOptions = {
	title ? : string;
	content ? : string;
	footer ? : string;
	triggerSelector ? : string;
	onOpen ? : () => void;
	onClose ? : () => void;
	animationDuration ? : number;
	overlayColor ? : string;
};

class BottomPanel {
	private config: BottomPanelConfig;
	private options: PanelOptions;
	private panel: HTMLElement;
	private overlay: HTMLElement;
	private styleElement: HTMLStyleElement;

	constructor(options: PanelOptions = {}) {
		this.config = {
			overlay: 'bottom-panel-overlay',
			container: 'bottom-panel',
			header: 'panel-header',
			title: 'panel-title',
			close: 'panel-close-btn',
			footer: 'panel-footer',
			content: 'panel-content'
		};

		this.options = {
			title: '',
			content: '',
			footer: '',
			triggerSelector: '.trigger-btn',
			onOpen: () => {},
			onClose: () => {},
			animationDuration: 300,
			overlayColor: 'rgba(0,0,0,0.5)'
		};

		this.options = {
			...this.options,
			...options
		};

		this.init();
	}

	private init() {
		this.createDOM();
		this.addStyles();
		this.initEvents();
	}

	private createDOM() {
		// 创建遮罩层
		this.overlay = document.createElement('div');
		this.overlay.className = this.config.overlay;

		// 创建面板容器
		this.panel = document.createElement('div');
		this.panel.className = this.config.container;

		// 创建标题栏
		const header = document.createElement('div');
		header.className = this.config.header;

		this.titleElement = document.createElement('h3');
		this.titleElement.className = this.config.title;
		this.titleElement.textContent = this.options.title;

		this.closeBtn = document.createElement('button');
		this.closeBtn.className = this.config.close;
		this.closeBtn.innerHTML = '&times;';

		header.appendChild(this.titleElement);
		header.appendChild(this.closeBtn);

		// 创建内容区域
		this.contentElement = document.createElement('div');
		this.contentElement.className = this.config.content;
		this.contentElement.innerHTML = this.options.content;

		// 创建FOOTER区域
		this.footerElement = document.createElement('div');
		this.footerElement.className = this.config.footer;
		this.footerElement.innerHTML = this.options.footer;

		// 组装面板
		this.panel.appendChild(header);
		this.panel.appendChild(this.contentElement);
		this.panel.appendChild(this.footerElement);

		// 添加到body
		document.body.appendChild(this.overlay);
		document.body.appendChild(this.panel);
	}

	private addStyles() {
		this.styleElement = document.createElement('style');
		this.styleElement.dataset.bottomPanel = 'true';
		this.styleElement.textContent = `
      .${this.config.overlay} {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: ${this.options.overlayColor};
        opacity: 0;
        pointer-events: none;
        transition: opacity ${this.options.animationDuration / 1000}s ease;
        z-index: 999;
      }

      .${this.config.overlay}.active {
        opacity: 1;
        pointer-events: auto;
      }

      .${this.config.container} {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-radius: 10px 10px 0 0;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
        transform: translateY(100%);
        transition: transform ${this.options.animationDuration / 1000}s cubic-bezier(0.25, 0.8, 0.25, 1);
        z-index: 999;
        max-height: 90vh;
        width: 100%;
        display: flex;
        flex-direction: column;
      }

      .${this.config.container}.active {
        transform: translateY(0);
      }

      .${this.config.header} {
        padding: 16px;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .${this.config.title} {
        font-size: 18px;
        font-weight: 600;
        color: #333;
      }

      .${this.config.close} {
        background: none;
        border: none;
        font-size: 24px;
        color: #999;
        cursor: pointer;
        padding: 4px;
      }

      .${this.config.content} {
        padding: 20px;
        overflow-y: auto;
        flex-grow: 1;
        font-size: 14px;
      }

      .${this.config.footer} {
        background: none;
        position: relative;
      }
    `;
		document.head.appendChild(this.styleElement);
	}

	private initEvents() {
		// 触发按钮事件
		if (this.options.triggerSelector) {
			const triggers = Array.from(document.querySelectorAll(this.options.triggerSelector));
			triggers.forEach(trigger => {
				trigger.addEventListener('click', () => this.open());
			});
		}

		// 关闭按钮事件
		this.closeBtn.addEventListener('click', () => this.close());

		// 遮罩层点击事件
		this.overlay.addEventListener('click', (e) => {
			if (e.target === this.overlay) {
				this.close();
			}
		});
	}

	open() {
		this.panel.classList.add('active');
		this.overlay.classList.add('active');
		document.body.style.overflow = 'hidden';
		this.options.onOpen();
	}

	close() {
		this.panel.classList.remove('active');
		this.overlay.classList.remove('active');
		document.body.style.overflow = '';
		this.options.onClose();
	}

	setTitle(title: string) {
		this.titleElement.textContent = title;
	}

	setContent(content: string) {
		this.contentElement.innerHTML = content;
	}

	updateOptions(newOptions: Partial < PanelOptions > ) {
		Object.assign(this.options, newOptions);
		if (newOptions.content) this.setContent(newOptions.content);
	}

	destroy() {
		this.panel.remove();
		this.overlay.remove();
		const style = document.querySelector('style[data-bottom-panel]');
		if (style) style.remove();
	}
}
